﻿.b-input-color-picker {
    padding: .6rem;

    > .b-input-color-picker-preview {
        position: relative;
        z-index: 1;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        /*margin-bottom: 0.5em;*/

        &::before {
            position: absolute;
            content: '';
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
            background-size: .5em;
            border-radius: .15em;
            z-index: -1;
        }

        > .b-input-color-picker-curent-color {
            display: inline-block;
            width: 100%;
            height: 100%;
        }
    }

    &[aria-disabled='true'] {
        opacity: .65;
    }
}
